import React, {Component} from 'react'
import {Card, Progress, Row, Col} from 'antd'
import {connect} from 'react-redux'
import {HomeWrapper} from "@/pages/Home/styled";
import {actionFunc} from './store'
import InterfaceStatus from './InterfaceStatus'


class Home extends Component {
    render() {
        const {
            cpuPercent,
            memoryPercent,
            cpuColor,
            memoryColor,
            CELL0Info,
            CELL1Info,
            WAN0Info,
            WAN1Info,
            LAN0Info,
            LAN1Info,
            LAN2Info,
            LAN3Info,
            wanCount,
            hwver,
            systemTime,
            version,
            scanData,
            upTime,
            buildTime,
            deviceModel,
        } = this.props
        return (
            <HomeWrapper>
                <Card title='System Resource Info' className='resource'>
                    <div className='wrapper'>
                        <div className='cpu-info both-info'>
                            <Progress type="circle" percent={cpuPercent} gapPosition='bottom' strokeColor={cpuColor}/>
                            <p>CPU</p>
                        </div>
                        <div className='mem-info both-info'>
                            <Progress type="circle" percent={memoryPercent} gapPosition='bottom'
                                      strokeColor={memoryColor}/>
                            <p>Memory</p>
                        </div>
                    </div>
                </Card>
                <Card title='Interface Status' className='interface'>
                    <InterfaceStatus status={CELL0Info} name='CELL0' imgClass='cell-icon'/>
                    <InterfaceStatus status={CELL1Info} name='CELL1' imgClass='cell-icon'/>
                    <InterfaceStatus status={WAN0Info} name='WAN0' imgClass='wan-icon'/>
                    {
                        wanCount === 2 ? (
                            <InterfaceStatus status={WAN1Info} name='WAN1' imgClass='wan-icon'/>
                        ) : (
                            <InterfaceStatus status={LAN0Info} name='LAN0' imgClass='lan-icon'/>
                        )
                    }
                    <InterfaceStatus status={LAN1Info} name='LAN1' imgClass='lan-icon'/>
                    <InterfaceStatus status={LAN2Info} name='LAN2' imgClass='lan-icon'/>
                    <InterfaceStatus status={LAN3Info} name='LAN3' imgClass='lan-icon'/>
                </Card>
                <Card title='Basic Info' className='basic-info'>
                    <Row>
                        <Col span={8}>
                            <span className='title'>Device Produce SN: </span><span>{scanData}</span>
                        </Col>
                        <Col span={8}>
                            <span className='title'>Software Version: </span><span>{version}</span>
                        </Col>
                        <Col span={8}>
                            <span className='title'>Device Model: </span><span>{deviceModel}</span>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={8}>
                            <span className='title'>System Time: </span><span>{systemTime}</span>
                        </Col>
                        <Col span={8}>
                            <span
                                className='title'>Uptime: </span><span>{upTime.day + 'Day ' + upTime.hour + 'Hour ' + upTime.minute + 'Minute'}</span>
                        </Col>
                        <Col span={8}>
                            <span className='title'>Hardware Version: </span><span>{hwver}</span>
                        </Col>
                    </Row>
                    <Row>
                        <Col span={12}>
                            <span className='title'>Device Build Time: </span><span>{buildTime}</span>
                        </Col>
                    </Row>
                </Card>
            </HomeWrapper>
        )
    }

    componentWillMount() {
        console.log('mount')
        this.props.requestList()
    }

    componentWillUnmount() {
        clearTimeout(this.props.timer)
        this.props.clearTimer()
    }

    componentWillUpdate() {
        console.log('update')
    }
}

const mapState = (state) => ({
    cpuPercent: state.getIn(['home', 'cpuPercent']),
    memoryPercent: state.getIn(['home', 'memoryPercent']),
    cpuColor: state.getIn(['home', 'cpuColor']),
    memoryColor: state.getIn(['home', 'memoryColor']),
    timer: state.getIn(['home', 'timer']),
    CELL0Info: state.getIn(['home', 'CELL0Info']),
    CELL1Info: state.getIn(['home', 'CELL1Info']),
    WAN0Info: state.getIn(['home', 'WAN0Info']),
    WAN1Info: state.getIn(['home', 'WAN1Info']),
    LAN0Info: state.getIn(['home', 'LAN0Info']),
    LAN1Info: state.getIn(['home', 'LAN1Info']),
    LAN2Info: state.getIn(['home', 'LAN2Info']),
    LAN3Info: state.getIn(['home', 'LAN3Info']),
    wanCount: state.getIn(['home', 'wanCount']),
    deviceModel: state.getIn(['home', 'deviceModel']),
    systemTime: state.getIn(['home', 'systemTime']),
    version: state.getIn(['home', 'version']),
    scanData: state.getIn(['home', 'scanData']),
    upTime: state.getIn(['home', 'upTime']),
    hwver: state.getIn(['home', 'hwver']),
    buildTime: state.getIn(['home', 'buildTime']),
})
const mapDispatch = (dispatch) => ({
    requestList() {
        dispatch(actionFunc.requestList())
    },
    clearTimer() {
        dispatch(actionFunc.changeTimer(0))
    },
})

export default connect(mapState, mapDispatch)(Home)
